<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
</div>

<body>
    <script type="module">
        // import {
        //     createRenderer,
        //     render,
        //     h
        // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js'
        import {
            // renderOptions,
            h,
            render
        } from "./runtime-dom.js"

        /**
         * 参数可能是一个「类型」
         * 参数可以有两个「类型，属性/儿子」
         * 或者三个（有可能超过三个，从第三个开始都是儿子）
         * h(类型，属性，儿子)
         * h（类型，儿子）
         * 
        */
        // 两个参数，第二个可能是属性，或者虚拟节点「__v_isVNode」
        const ele1 = h('div', { a: 1 })
        const ele2 = h('div', h('p'))


        // 第二个参数就是一个数组==>儿子
        const ele3 = h('div', [h('p'), h("div")])

        // 直接传递非对象的，文本
        const ele4 = h('div', 'hello')

        // 不能出现三个参数 第二个只能是属性
        const ele5 = h('iv', {}, 'hello')
        const ele6 = h('div', {}, h('p')) //虚拟节点 包装成数组


        // 如果超过是三个参数后边都是儿子
        const ele7 = h('div', {

            style: {
                color: 'red'
            }

        }, h('p', 'p'), h('div', 'div'))

        // 其他情况就是属性

        render(ele7, app)
        console.log(ele7);

    </script>
</body>

</html>